<template>
  <div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb well">
            <li>数据库</li>
            <li>{{dataBaseUrl}}</li>
          </ol>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading">集群统计</div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{getPropertyCount(getProperty(this.clusterState, 'nodes'))}}</span>
                    <br>节点
                    <!-- (Node) -->
                  </div>
                </div>
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{getProperty(this.state,'_shards','total')}}</span>
                    <br>分片
                    <!-- (Shard total) -->
                  </div>
                </div>
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{getProperty(this.state,'_shards','total')}}</span>
                    <br>成功分片
                    <!-- (Shard successful) -->
                  </div>
                </div>
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{getPropertyCount(getProperty(this.state, 'indices'))}}</span>
                    <br>索引
                    <!-- (Indices) -->
                  </div>
                </div>
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{getProperty(this.state, '_all', 'total', 'docs', 'count')}}</span>
                    <br>文档
                    <!-- (Documents) -->
                  </div>
                </div>
                <div class="col-md-4 col-lg-2">
                  <div class="well text-center">
                    <span class="stat-detail">{{(getProperty(this.state, '_all', 'total', 'store', 'size_in_bytes')/1024.2).toFixed(2)}}KB</span>
                    <br>大小
                    <!-- (Size) -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">健康</h3>
            </div>
            <div class="panel-body table-responsive">
              <table class="table table-bordered table-striped">
                <tbody>
                  <tr v-for="(value,key) in health" :key="key">
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">索引</h3>
            </div>
            <div class="panel-body table-responsive">
              <table class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>索引</th>
                    <th>文档数目</th>
                    <th>分片数</th>
                    <th>备份数</th>
                    <th>主分片大小</th>
                    <th>状态</th>
                    <td>操作</td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(indice,key) in getProperty(this.state, 'indices')" :key="key">
                    <td><a href="javascript:void(0)" @click="handleIndiceCkick(key)">{{key}}</a></td>
                    <td>{{getProperty(indice, 'total', 'docs', 'count')}}</td>
                    <td>{{getProperty(clusterState, 'metadata', 'indices', key, 'settings', 'index' ,'number_of_shards')}}</td>
                    <td>{{getProperty(clusterState, 'metadata', 'indices', key, 'settings', 'index' ,'number_of_replicas')}}</td>
                    <td>{{(getProperty(indice, 'primaries', 'store', 'size_in_bytes')/1024).toFixed(2)}}KB</td>
                    <td>{{getProperty(clusterState, 'metadata', 'indices', key, 'state')}}</td>
                    <td>查看</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {bus} from '@/bus.js'

export default {
  name: 'DataBase',
  data () {
    return {
      clusterState: {},
      state: {},
      health: {}
    }
  },
  computed: {
    dataBaseUrl () {
      return this.$route.params.url
    }
  },
  watch: {
    dataBaseUrl () {
      this.updateState()
    }
  },
  methods: {
    getPropertyCount (obj) {
      var count = 0
      // eslint-disable-next-line
      for (var key in obj) {
        count++
      }

      return count
    },
    getProperty () {
      var obj = arguments[0]
      for (let index = 1; index < arguments.length; index++) {
        if (obj !== null && obj !== undefined) {
          obj = obj[arguments[index]]
        } else {
          break
        }
      }
      return obj
    },
    updateState () {
      this.clusterState = {}
      this.state = {}
      this.health = {}

      bus.execute({
        method: 'GET',
        url: 'http://' + this.dataBaseUrl + '/_cluster/state',
        data: null
      }).then((res) => {
        this.clusterState = res.data
      })

      bus.execute({
        method: 'GET',
        url: 'http://' + this.dataBaseUrl + '/_stats',
        data: null
      }).then((res) => {
        this.state = res.data
      })

      bus.execute({
        method: 'GET',
        url: 'http://' + this.dataBaseUrl + '/_cluster/health',
        data: null
      }).then((res) => {
        this.health = res.data
      })
    },
    handleIndiceCkick (indice) {
      this.$router.push({
        name: 'simpleSearchIndex',
        params: {
          url: this.dataBaseUrl,
          indice: indice,
          type: '_all'
        }
      })
    }
  },
  mounted () {
    this.updateState()
  }
}
</script>

<style>
.stat-detail {
    font-weight: 700;
    font-size: 24px;
    line-height: 22px;
}
</style>
